<template>
  <section class="home-banner">
    <div ref="bannerBox">
      <ul
        :style="{
          left,
          width: width * (bannerList.length + 1) + 'px',
          transition: isMove,
        }"
        :class="{ move: isMove }"
      >
        <li
          v-for="item in bannerList"
          :key="item.id"
          :style="{ width: width + 'px' }"
        >
          <img
            :src="host + item.image"
            alt=""
            :style="{ width: width + 'px' }"
          />
        </li>

        <li v-if="bannerList.length > 0">
          <img
            :src="host + bannerList[0].image"
            alt=""
            :style="{ width: width + 'px' }"
          />
        </li>
      </ul>
    </div>
    <div ref="bannerBtn">
      <span
        v-for="(item, index) in bannerList"
        :key="index"
        :class="{ action: actionIdx === index }"
        @click="bannerTo(index)"
      ></span>
    </div>
  </section>
</template>

<script>
import config from "../../../config";
import { getBannerApi } from "../../../api";
export default {
  name: "Banner",
  data() {
    return {
      isMove: "left 1s linear",
      host: config.host,
      bannerList: [],
      idx: 0,
      width: 0,
    };
  },
  computed: {
    actionIdx() {
      if (this.idx === this.bannerList.length) return 0;
      return this.idx;
    },
    left() {
      return this.idx * -this.width + "px";
    },
  },
  methods: {
    moveFn() {
      this.idx++;
      if (this.idx === 1) {
        this.isMove = "left 700ms linear";
      }
      if (this.idx === this.bannerList.length) {
        setTimeout(() => {
          this.isMove = "none";
          this.idx = 0;
        }, 700);
      }
    },
    getWidth() {
      this.width = document.body.scrollWidth;
    },

    bannerTo(idx) {
      console.log(idx);
      this.idx = idx;
    },

    enter() {
      clearInterval(this.move);
    },

    leave() {
      this.move = setInterval(this.moveFn, 3000);
    },
  },
  mounted() {
    getBannerApi(
      (response) => {
        if (response.data.status === 1) {
          this.bannerList = response.data.data;
        }
      },
      (err) => {
        console.log(err);
      }
    );
    this.move = setInterval(this.moveFn, 3000);
    this.width = document.body.scrollWidth;
    window.addEventListener("resize", this.getWidth);
    this.$refs.bannerBtn.addEventListener("mouseenter", this.enter);
    this.$refs.bannerBtn.addEventListener("mouseleave", this.leave);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.getWidth);
    clearInterval(this.move);
  },
};
</script>

<style lang="stylus" scoped>
.home-banner {
  width: 100%;
  height: calc(100vh - 100px);
  overflow: hidden;

  &>div:first-child {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: -1;
  }

  ul {
    height: 100%;
    position: absolute;
  }

  li {
    float: left;
    height: 100%;
  }

  img {
    display: block;
    height: 100%;
  }

  &>div:last-child {
    display: flex;
    padding: 10px;
    position: absolute;
    bottom: 20px;
    left: 50px;

    span {
      display: block;
      width: 14px;
      height: 14px;
      border: 2px solid #999;
      border-radius: 50%;
      margin: 0 8px;
      cursor: pointer;
    }
  }

  .move {
    transition: left 700ms linear;
  }

  .action {
    background-color: #fe4d1b;
  }
}
</style>